<template>
    <view class="condition_table">
        <view class="table_line tabel_header">
            <view class="cell table_line_cell"> 知识点名称 </view>
            <view class="cell table_line_cell"> 答题频次 </view>
            <view class="cell table_line_cell"> 掌握程度 </view>
        </view>
        <view v-for="(i, idx) in tableList" :key="idx" class="table_line">
            <view class="cell table_line_cell">
                {{ i.name }}
            </view>
            <view class="cell table_line_cell">
                {{ i.number }}
            </view>
            <view class="cell table_line_cell">
                {{ i.trend === 1 ? '掌握' : '陌生' }}
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { ref } from 'vue';

// const props = withDefaults(
//     defineProps<{
//         list: [];
//     }>(),
//     { list: () => [] },
// );
const emits = defineEmits(['filter']);
const tableList = ref([
    { name: '常用易错字', number: 9, trend: 1 },
    { name: '常用形近字', number: 9, trend: 1 },
    { name: '字音变调', number: 9, trend: 1 },
    { name: '同音字', number: 9, trend: 1 },
    { name: '章节生字', number: 9, trend: 1 },
    { name: '需要背诵章节', number: 9, trend: 1 },
    { name: '需要背诵章节', number: 9, trend: 1 },
]);
</script>
<style lang="scss" scoped>
.condition_table {
    border-radius: 20rpx;
    overflow: hidden;
    .tabel_header {
        font-weight: 500 !important;
        color: rgba(51, 51, 51, 1) !important;
    }
    .table_line {
        display: flex;
        border-bottom: 1px solid #d4ddf0;
        font-size: 26rpx;
        color: #666666;

        &:nth-child(n) {
            background-color: #e8f0ff;
        }

        &:nth-child(2n) {
            background-color: #f6f9ff;
        }

        &:last-child {
            border-bottom: none;
        }

        &_cell {
            flex: 1;
            border-right: 1px solid #d4ddf0;
            height: 76rpx;
            min-width: 40rpx;
            line-height: 76rpx;
            text-align: center;

            &:nth-child(1) {
                min-width: 152rpx;
                font-size: 24rpx;
            }

            &:last-child {
                border-right: none;
            }
        }
    }
}
</style>
